<template>
  <div class="scrollLoad_container">
    <div class="scrollLoad_header">header</div>
    <div v-infinite-scroll="load" class="scrollLoad_main">
      <div  v-for="item in 30" :key="item" class="scrollLoad_main_item">{{ item }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScrollLoad',
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      const headerClientHeight =
        document.querySelector('.scrollLoad_header').clientHeight
      document.querySelector(
        '.scrollLoad_main'
      ).style.height = `calc(100vh - ${headerClientHeight + 20}px)`
    })
  },
  methods: {
    load() {
      console.log('滚动到底部了')
    },
  },
}
</script>
<style lang="less" scoped>
.scrollLoad_container {
  overflow: hidden;
  .scrollLoad_header {
    height: 60px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: aqua;
  }
  .scrollLoad_main {
    overflow-y: auto;
    padding: 5px 10px;
    box-sizing: border-box;
    &_item {
      background: rgb(9, 231, 46);
      color: #fff;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    .scrollLoad_main_item + .scrollLoad_main_item {
      margin-top: 10px;
      box-sizing: border-box;
    }
  }
}
</style>